import { Input, NavBar, TextArea } from 'antd-mobile'
import { useEffect, useState } from 'react'

import styles from './index.module.scss'
type Props = {
  onClose: () => void
  value: string
  onUpdateName: (type: '' | 'name' | 'intro' | 'birthday', name: string) => void
  type: '' | 'name' | 'intro' | 'birthday'
}
const EditInput = ({ onClose, value, onUpdateName, type }: Props) => {
  const [inputValue, setInputValue] = useState(value)
  const onSave = () => {
    onUpdateName(type, inputValue)
  }

  // 处理props变化后不更新视图问题
  useEffect(() => {
    // value 为 null 或 undefined 时，设置为默认值为空字符串
    setInputValue(value ?? '')
  }, [value])
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        className="navbar"
        right={
          <span className="commit-btn" onClick={onSave}>
            提交
          </span>
        }>
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>

        <div className="input-wrap">
          {type === 'name' ? (
            <Input
              placeholder="请输入"
              value={inputValue}
              onChange={setInputValue}
            />
          ) : (
            <TextArea
              className="textarea"
              placeholder="请输入"
              // 展示：右下角的字数统计
              showCount
              // 指定内容最大长度
              maxLength={100}
              // 指定 文本域 展示内容的行数（文本域高度）
              rows={4}
              value={inputValue}
              onChange={setInputValue}
            />
          )}
        </div>
      </div>
    </div>
  )
}

export default EditInput
